  /*
    "text-align":0
	   单元格对齐方： 
     0 水平左对齐   1 水平居中  2 水平右对齐   3 垂直顶部对齐  4 垂直居中对齐  5 垂直底部对齐 6 
    */
   
    /* 设置 canvas 的初始显示位置 */
    #page-info {
        flex-grow: 1;
    }

    .canvas-container {
        top:180px;
     
        height: 100vh;
        overflow-y: scroll;
        scroll-behavior: smooth;
    }
    .menu-bar {
        display: flex;
        position: relative;
        flex-direction: column;
        align-items: flex-start; /* 添加这行来使子元素靠左排列 */
        padding: 10px;
        background-color: #ffffff;
        overflow: auto;
        height: 180px;
        z-index: 100;
      
    }
    .menu-bar div {
        flex: 1; /* 子元素会扩展来填充可用空间，对于垂直排列，这将影响高度而不是宽度 */
    }

    .page {
        width: 220mm;
        height: 297mm;
        border: 1px solid #ccc;
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        background-color: white;
    }

    .header, .footer {
        width: 210mm;
        height: 18mm;
        text-align: center;
        background-color: white;
        position: relative;
    }

    .main_canvas {
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 0;
    }

    .header main_canvas {
        position: absolute;
        left: 0;
        top: 0;
    }

    .contentCanvas
    {
        position: absolute;
        left:15;
        top: 68;
    }
    .footer main_canvas{
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .content {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        padding-top: 64px;
        padding-bottom: 64px;
        /* border-top: 1px dashed #ccc;
        border-bottom: 1px dashed #ccc; */
    }
   

    #backgroundCanvas { display: block; top: 0px; left: 24px; position: absolute;z-index: 1;pointer-events: none;  position: absolute; /* 绝对定位，使Canvas重叠 */} /* 确保背景画布不接受任何鼠标事件 */
    #textCanvas { display: block; top: 68px; left: 16px; position: absolute;z-index: 2;  position: absolute; /* 绝对定位，使Canvas重叠 */} 
    #myCanvas {  display: block; top: 68px; left: 16px; position: absolute;z-index: 5;  position: absolute; /* 绝对定位，使Canvas重叠 */ }


      #cellsCanvas {
        position: absolute;  /* 或者使用 'relative', 'fixed', 或 'sticky' */
        top: 210px;         /* 距离顶部的距离 */
        left: 1490px;         /* 距离左边的距离 */
       
        border: 0px solid #280303; /* 设置 canvas 的边框颜色 */
        z-index: 101;
        pointer-events: none;
        display:none; 
      }
 
      #mainCanvas {
     border: 1px solid black;
   }
 
   .cursorCoordinates{
     font-size: 8px;
   }
 
   .active {
     background-color: #4CAF50; /* 选中项的背景色，可根据需要调整 */
     color: white; /* 选中项的文字颜色，可根据需要调整 */
 }
 

    #ceache-canvas {
    display: none; /* 隐藏大画布 */
    }
 
 .navbar {
     background: #333;
     overflow: auto;
     white-space: nowrap;
     position: relative;
     z-index: 200;
     width: 100%; /* 子元素宽度设置为父容器的100% */
 }
 
 .menu {
     display: inline-block;
     color: white;
     padding: 14px 20px;
     cursor: pointer;
     z-index: 201;
 }
 
 /* 分割线样式调整 */
 .menu.right-border {
     position: relative; /* 为了使用绝对定位的伪元素 */
 }
 
 .menu.right-border::after {
     content: ""; /* 伪元素内容为空 */
     position: absolute; /* 使用绝对定位 */
     right: 0; /* 定位到容器的右侧 */
     height: 80%; /* 分割线的高度为容器高度的80% */
     width: 1px; /* 分割线的宽度 */
     background-color: #767373; /* 分割线颜色 */
     top: 10%; /* 顶部偏移，使其垂直居中 */
 }
 
 .menu.left-border {
     position: relative; /* 为了使用绝对定位的伪元素 */
 }


 .submenu_main_container {
    display: flex;
    flex-wrap: wrap; /* 允许子元素换行 */
    border: 1px solid #5b5858;
}

.submenu_main_container > .filler {
    flex-grow: 999; /* 给予一个大的 flex-grow 值确保它占据所有剩余空间 */
    min-width: 0px; /* 确保即使没有内容也可以伸展 */
}


 .menu.left-border::before {
     content: "";
     position: absolute;
     left: 0;
     top: 10%;
     height: 80%;
     width: 1px;
     background-color: #767373;
 }
 
 .menu:hover {
     background-color: #555;
 }
 #navBar_sbu_001{
    z-index: 99;
 }
 
 .submenu-container {
     display: none;
     background:#FFFFFF;
     padding: 1px;
     border: 1px solid #5b5858;
     width: 100%;
     display: flex;
     z-index: 100;
    
 }
 
 .submenu {
     display: none;
     padding: 1px;
     z-index: 10;
   
 }
 .submenu2 {
     display: none;
     padding: 1px;
   
 }
 .submenu div {
     margin: 1px;
     display: inline-block;
     background:transparent;
     padding: 3px 1px;
     border-radius: 0px;
     z-index: 10;
     
 }
 .submenu2 div {
     margin: 1px;
     display: flex;
     background:transparent;
     padding: 3px 1px;
     border-radius: 0px;
     z-index: 10;
 }
 
 .setOneRow{
  
   margin: 1px;
   display: inline-block;
    background:transparent;
    padding: 3px 1px;
    border-radius: 0px;
 }
 
 
 .button-container {
     position: relative;
     display: inline-block;
     z-index: 10;
    
 }
 
 .button-container > .divider {
    width: auto; /* 基于内容的宽度 */
    max-width: 100%; /* 避免子元素宽度超过容器 */
    z-index: 10;
}
 
 .button-container2 {
     position: relative;
     display: inline-block;
     z-index: 10;

 }
 
 .button {
     padding: 10px;
     border: 0px solid transparent;
     background-color: transparent;
     cursor: pointer;
     font-size: 16px;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border-radius: 5px;
     transition: border 0.3s;
 }
 
 
 
 .button:hover {
     border-color: #f2f2f2;
     border: 0px solid transparent;
 }
 
 .button img {
     width: 32px;
     height: 32px;
 }
 
 .button span {
     margin-top: 5px;
 }
 
 .icon-button {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 10px;
     margin-left: 1px;
     cursor: pointer;
     background-color: transparent;
     color: white;
     border: none;
     border-radius: 4px;
 }
 
 .icon-button img {
     width: 18px;
     height: 18px;
     margin-bottom: 1px;
 }
 
 .icon-button:hover {
     background-color: rgba(255, 255, 255, 0.2);
 }
 
 .icon-button span {
     font-size: 2px; /* 设置文字字体大小为8px */
 }
 
 
 .menu-group {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0 0px;
     z-index: 10;
   }
 
   .menu-group .buttons {
     display: flex;
   }
   
   .buttons2 {
             display: flex; /* 使按钮水平排列 */
             align-items: center;
             width: 32px;
             height: 32px;
         }
 
   .menu-item:last-child {
     margin-right: 0;
   }
 
   .menu-item:hover {
     background-color: #d1d1d1;
   }
 
   .div divider {
    flex: none;
    align-self: stretch; /* 使分割线高度自适应navbar的高度 */
    width: 2px;
    height: 80px;
    border-left: 1px solid #c2c0c0; /* 使用边框作为分割线 */
    margin: 0 1px; /* 两侧的间距 */
   }
 
   .divider {
     flex: none;
     align-self: stretch; /* 使分割线高度自适应navbar的高度 */
     width: 2px;
     height: 80px;
     border-left: 1px solid #c2c0c0; /* 使用边框作为分割线 */
     margin: 0 1px; /* 两侧的间距 */
   }
 
   .menu-group {
     display: flex;
     flex-direction: column;
     align-items: center; /* 水平居中子元素 */
     justify-content: center; /* 垂直居中子元素，如果需要的话 */
     padding: 0 20px;
     z-index: 10;
 }
 
 .group-title {
     text-align: center;
     font-size: 14px;
     margin-top: 5px;
     width: 100%; /* 确保标题宽度与父容器相同，以便text-align生效 */
     z-index: 10;
 }
 
 .menu-item {
     display: flex;
     flex-direction: column; /* 使内容垂直排列 */
     align-items: center; /* 水平居中对齐子元素 */
     justify-content: center; /* 垂直居中对齐子元素，如果有必要的话 */
     padding: 5px 10px; /* 或根据实际情况调整内边距 */
     cursor: pointer;
     background-color: transparent;
     border: none;
     margin-right: 5px; /* 保持原有右边距 */
     transition: background-color 0.3s; /* 保持背景颜色的渐变效果 */
 }
 
 
 .menu-item2 {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             padding: 5px 10px;
             cursor: pointer;
             background-color: transparent;
             border: none;
             margin-right: 5px; /* 为按钮之间提供间距 */
         }
 .icon {
     width: 32px; /* 或根据实际图标大小进行调整 */
     height: 32px; /* 或根据实际图标大小进行调整 */
     margin-bottom: 5px; /* 在图标和文字之间添加一些间隙 */
 }
 
 
 
   .canvas-popup {
     display: none;
     position: absolute; /* 绝对定位 */
     z-index: 10; /* 确保画布位于按钮之上 */
     background: #fff;
     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); /* 外部阴影 */
   }
 
   /* 调整画布尺寸以匹配网格 */
   #canvasPopup {
     width: 300px; /* 宽度为5个单元格+50像素的偏移 */
     height:520px; /* 高度为5个单元格+50像素的偏移 */
   }
 
 
   #text-input {
     position: absolute; /* 绝对定位，以便可以准确放置在Canvas上 */
     z-index: 1000; /* 确保它位于Canvas上方 */
     border: none; /* 去除边框 */
     outline: none; /* 去除焦点轮廓 */
     background: transparent; /* 背景透明 */
     color: black; /* 文本颜色，根据需要调整 */
     width: auto; /* 宽度自适应，或根据需要调整 */
     height: auto; /* 高度自适应，或根据需要调整 */
     padding: 2; /* 去除内边距 */
     margin: 2; /* 去除外边距 */
     
   }
 
   .divider_parent {
     flex: none;
     align-self: stretch; /* 使分割线高度自适应navbar的高度 */
     width: 2px;
     border-left: 1px solid #c2c0c0; /* 使用边框作为分割线 */
     margin: 0 10px; /* 两侧的间距 */
   }
  
   .areaBox {
     display: flex;
     width: 430px;
     padding: 3 1;
     background-color: white;
     flex-direction: column; /* 设置Flex容器的主轴方向为垂直 */
     align-items: flex-start; /* 添加这行来使子元素靠左排列 */
 }
 
 .areaBox > div {
     margin-bottom: 1px; /* 为子元素之间添加一些间隔 */
 }
 
 /* 最后一个子元素不需要底部间隔 */
 .areaBox > div:last-child {
     margin-bottom: 0;
 }
 
 .div1, .div2 {
     display: flex;
     width: 430px;
     flex-direction: row; /* 设置子元素的排列方向为水平 */
 }
 
 .div1 > *, .div2 > * {
     margin-right: 10px; /* 为子元素之间添加一些间隔 */
 }
 
 /* 最后一个子元素不需要右侧间隔 */
 .div1 > *:last-child, .div2 > *:last-child {
     margin-right: 0;
 }
 
 .fontAreaTitle{
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-size: small;
     width: 280px;
 }
 
 .floorOfTools {
     display: flex; /* 启用Flexbox布局 */
     flex-direction: column; /* 确保子元素按垂直方向排列 */
     gap: 20px; /* 根据需要调整子元素之间的间隔 */
     border-color: #4CAF50;
     border-width: 2px;
 }
 
 .fontToolsBox {
     display: flex; /* 启用Flexbox布局，确保子元素水平排列 */
     flex-direction: row; 
     gap: 10px; /* 根据需要调整子元素之间的间隔 */
 }
 
 .fontToolsBox > div {
     padding: 10px; /* 根据需要调整内边距 */
     background-color: #f0f0f0; /* 轻灰色背景 */
     border-radius: 5px; /* 轻微的圆角 */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加盒阴影以实现高光效果 */
     transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
 }
 
 .fontToolsBox > div:hover {
     background-color: #e9e9e9; /* 鼠标悬停时的背景色变化 */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 鼠标悬停时增加阴影以强化高光效果 */
 }
 
 
   .selectors {
             display: flex;
             align-items:center; /* 垂直居中 */
             justify-content: start; /* 水平方向从头开始排列 */
             gap: 10px; /* 下拉框之间的间距 */
         }
 
         select {
             flex-grow: 1; /* 使下拉框能够填充额外的空间 */
         }
         #group-row-column2 {
     display: flex;
     flex-direction: column;
 }
 
 .selectors, .selectors2 {
     display: flex;
     align-items: center;
     gap: 10px; /* 根据需要调整间隙大小 */
 }
 
 .icon {
     width: 16px; /* 根据实际情况调整图标大小 */
     height: 16px;
     align-items: center;
     vertical-align: middle;
 }
 
 .group-title {
     margin-top: 20px; /* 根据需要调整间隙大小 */
     font-size: small;
 }
 .divider2 {
             width: 2px; /* 分隔线的宽度 */
             background-color: #ccc; /* 分隔线的颜色 */
             margin: 0 20px; /* 分隔线的外边距 */
             height: auto; /* 根据内容调整高度 */
             align-self: stretch; /* 使分隔线填满容器的高度 */
         }
 
 .child {
         width: 100px; /* 设置子DIV的宽度，根据需要调整 */
         height: 100px; /* 设置子DIV的高度，根据需要调整 */
         background-color: lightblue; /* 设置子DIV的背景颜色，仅为示例 */
         text-align: center; /* 文本居中 */
         line-height: 100px; /* 让文本垂直居中显示 */
     }
 
 .tools_container {
     display: flex; /* 启用Flexbox布局 */
     flex-direction: column; /* 子元素沿垂直方向排列 */
     align-items: center; /* 子元素在交叉轴上居中对齐 */
 }
 
 #Main_File_fileButton {
     padding: 10px 20px;
     cursor: pointer;
 }
 
     #Main_File_fileButton {
     padding: 10px 20px;
     cursor: pointer;
 }
 
 .Main_File_menu {
     list-style-type: none;
     padding: 0;
     margin: 0;
     position: absolute;
     background-color: #f2f2f2;
     box-shadow: 0 4px 8px rgba(0,0,0,0.15);
     display: none;
     width: 120px; /* 设置菜单宽度 */
     z-index: 1000;
 }
 
 .Main_File_menu > li {
     position: relative;
     padding: 10px 10px 10px 34px;
     cursor: pointer;
     background-repeat: no-repeat;
     background-position: 10px center;
 }
 
 .Main_File_submenu {
     display: none;
     position: absolute;
     left: 100%;
     top: 0;
     width: 140px;
     background-color: #ffffff;
     box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 }
 
 .Main_File_submenu li {
     padding: 10px 10px 10px 34px;
     background-color: #f2f2f2;
     background-repeat: no-repeat;
     background-position: 10px center;
 }
 
 .Main_File_menu > li:hover {
     background-color: #ddd;
 }
 
 .Main_File_submenu li:hover {
     background-color: #ddd;
 }
 
 /* 图标样式也需要添加前缀 */
 .Main_File_icon-new {
     background-image: url('imgs/new.png');
 }
 
 .Main_File_icon-open {
     background-image: url('imgs/open.png');
 }
 
 .Main_File_icon-save {
     background-image: url('imgs/save.png');
 }
 
 .Main_File_icon-save-as {
     background-image: url('imgs/save_as.png');
 }
 
 .Main_File_icon-close {
     background-image: url('imgs/close.png');
 }
 
 .Main_File_icon-pdf {
     background-image: url('imgs/pdf.png');
 }
 
 .Main_File_icon-doc {
     background-image: url('imgs/doc.png');
 }
 
 .Main_File_icon-img {
     background-image: url('imgs/image.png');
 }
 /*分表管理样式*/
 #mag_tab_dialog { 
   display: none; 
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 #mag_tab_dialog .list-box-container {
   display: flex;
   justify-content: space-between;
 }
 
 .mag_tab_list-box { 
   margin-top: 20px; 
   flex: 1;
   margin-left: 10px;
   margin-right: 10px;
 }
 
 table { 
   width: 100%; 
   border-collapse: collapse; 
 }
 
 th, td { 
   border: 1px solid #ddd; 
   padding: 8px; 
   text-align: left; 
 }
 
 .mag_tab_highlighted {
     background-color: #f0f0f0;
 }
 
 /*分表管理样式*/

 
.CellsEditMenu {
    display: none;
    position: absolute;
    z-index: 1000; /* 确保这个值足够高，以覆盖其他内容 */
    background-color: white;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.2); /* 阴影效果 */
}

#CellsEditMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#CellsEditMenu ul li {
    padding: 8px;
    cursor: pointer;
}

#CellsEditMenu ul li:hover {
    background-color: #f7f7f7;
}

 /* 隐藏输入框，但保持其可接受输入 */
 #editableDiv {
    z-index: 999;
    opacity: 0; /* 使div不可见但仍然可以接收输入 */
    position: absolute; /* 避免占用页面空间 */
    top: 1;
    left: 1;
    width: 1px; /* 最小化可编辑区域的尺寸 */
    height: 1px; /* 最小化可编辑区域的尺寸 */
    overflow: hidden; /* 避免滚动条出现 */
    }

    #modalLSS {
        display: none;
        position: absolute; /* 使用 absolute 定位，依据文档流 */
        padding: 20px;
        background: white;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        border-radius: 8px;
        z-index: 1000;
      }
    
      #lineSpacingOptionsLSS {
        list-style: none;
        margin: 0;
        padding: 0;
      }
    
      #lineSpacingOptionsLSS li {
        margin: 10px 0;
        cursor: pointer;
      }
    
      #lineSpacingOptionsLSS .selected {
        font-weight: bold;
        color: green;
      }

      html, body {
        margin: 0;
        padding: 0;
        overflow-y: hidden;  /* 阻止垂直滚动 */
        overflow-x:auto; 
        height: 100%;        /* 设置高度为100% */
    }


